<!-- 课程基本信息新增和修改 -->
<template>
  <div>
    <el-dialog title="课程" :visible.sync="dialogVisible">
      <div>
        <el-form
          ref="dataForm"
          :model="dataForm"
          label-width="80px"
          :rules="dataRule"
        >
          <el-form-item label="课程名" prop="course_name">
            <el-input v-model="dataForm.course_name"></el-input>
          </el-form-item>
          <el-form-item label="课程编码" prop="course_number">
            <el-input v-model="dataForm.course_number"></el-input>
          </el-form-item>
          <el-form-item label="课程图片" required prop="pictureUrl">
            <el-upload
          class="avatar-uploader"
          :action="filePath"
          :show-file-list="false"
          :headers="{'token':token}"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="dataForm.pictureUrl" :src="dataForm.pictureUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
          </el-form-item>
          <el-form-item label="课程简介">
            <el-input
              type="textarea"
              v-model="dataForm.course_intro"
              prop="course_intro"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="dataForm.course_status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDataForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        id: 0,
        course_name: "",
        course_number: "",
        course_intro: "",
        course_status: 1,
         pictureUrl: '',
      },
      dataRule: {
        course_name: [{ required: true, message: "请输入课程名", trigger: "blur" }],
        course_number: [ { required: true, message: "请输入课程编号", trigger: "blur" }],
        pictureUrl: [ { required: true, message: "请选择图片", trigger: "blur" }],
        course_intro :[]
      },
      token:this.$cookie.get('token'),
      filePath:'http://localhost:8080/renren-fast/teacher/personInfo/uploadIcon'
    };
  },
  methods: {
    //初始化
    init(id) {
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      console.log("初始化"+this.dataForm.id);
       this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
          })
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/teacher/courseManage/data/${this.dataForm.id}`),
          method: "get",
        }).then(({ data }) => {
          if (data && data.code === 0) {
              this.dataForm.course_name = data.data.course_name
              this.dataForm.course_number = data.data.course_number
              this.dataForm.pictureUrl = data.data.cover_picture
              this.dataForm.course_intro = data.data.course_intro
              this.dataForm.course_status = data.data.course_status
          }else{
              this.$message(data.msg)
          }
        });
      }
    },
     //上传成功后
    handleAvatarSuccess(res){
      this.dataForm.pictureUrl= this.$http.adornUrl(`/${res.filePath}`)

    },
    //表单提交
    submitDataForm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
        console.log(this.dataForm.id)
          this.$http({
            url: this.$http.adornUrl(`/teacher/courseManage/${!this.dataForm.id ? 'save': 'update'}`),
            method: "post",
            data: this.$http.adornData({
                course_name : this.dataForm.course_name,
                course_number: this.dataForm.course_number,
                imgSrc: this.dataForm.pictureUrl,
                course_intro : this.dataForm.course_intro,
                course_status: this.dataForm.course_status,
                course_info_id:this.dataForm.id
            }),
          }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.dialogVisible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            });
        }
      });
    },
  },
};
</script>

<style  scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  font-size: 22px;
  color: #8c939d;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}
.avatar {
  width: 200px;
  height: 100px;
  display: block;
}
</style>
